<template>
	<Page>
		<Topbar ref="topbar" active="消息中心" />
		<Content>
			<Panel style="padding: 3.5rem;">
				<view class="container">
					<view class="left">
						<sally-tree v-if="loading==false && loading1==false" class="tab_box" :option="config" @onChange="treeChange"
							:list="list" v-model="params.templateType">
						</sally-tree>
					</view>
					<view class="right">
						<view class="content_box">
							<view class="panel">
								<view class="radio-btns">
									<view :class="params.messageStatus==''?'active':''" @click="changeNotice('')">全部
									</view>
									<view :class="params.messageStatus==1?'active':''" @click="changeNotice(1)">未读
										{{noReadNum}}
									</view>
								</view>
								<view class="back" @click="goBack" v-show="type!='all'">
									<u-icon name="arrow-left" color="#666" size="14"
										style="margin-right: 0.5rem;"></u-icon> 返回
								</view>
							</view>
							<view class="content">
								<view class="loading" v-if="loading">
									<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
								</view>
								<!-- @rowClick="click" -->
								<Table v-show="type == 'all'" ref="table" :columns="columns" :src="src" :params="params"
									pagination>
									<template slot-scope="{ row,index }" slot="image">
										<view class="notice" style="display: flex;flex-direction: row;justify-content: center;">
											<image :src="emailIcon" />
											<view v-show="row.messageStatus" class="total">
											</view>
										</view>
									</template>
									<template slot-scope="{ row,index }" slot="action">
										<view style="display: flex;flex-direction: row;justify-content: center;">
											<view class="operationBtn" @click="checkDetail(row)">查看
											</view>
											<view class="operationBtn" style="margin-left: 4rem;"
												@click="deleteRow(row)">删除
											</view>
										</view>
									</template>
								</Table>
								<DetailCard :type="templateName.includes('预警')?'warning':'notice'"
									:rowDetail="rowDetail" v-show="type == 'detail'"></DetailCard>
							</view>
						</view>
					</view>
				</view>
			</Panel>
		</Content>
		<Modal :title="`您确认要删除吗？`" ref="popup" @confirm="confirm">
			<!-- <view style="display: flex; justify-content: center; align-items: center">
				{{ selectedItem.deviceNo }}
			</view> -->
		</Modal>
	</Page>
</template>

<script>
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Modal from "@/components/modal/index.vue";
	import Button from "@/components/button/index.vue";
	import Table from '@/components/table/index.vue';
	import DetailCard from './modules/checkDetail';
	import emailIcon from '@/components/topbar/img/email.png';
	import {
		setDevice,
		getDevice
	} from "@/store/user.js";
	import fetch from "@/utils/fetch";
	import iconSrc from "./img/i.png";

	export default {
		components: {
			DetailCard,
			Page,
			Topbar,
			Content,
			Panel,
			Modal,
			Table,
			Button,
		},
		computed: {
			list() {
				console.log(this.warningInfo, this.noticeInfo)
				return [{
						label: "预警",
						id: '预警',
						children: [{
								label: `工单预警(${this.warningInfo.workOrderWarning || 0})`,
								id: 1,
							},
							{
								label: `设备预警(${this.warningInfo.deviceWarning || 0})`,
								id: 2,
							},
							{
								label: `模具预警(${this.warningInfo.moldWarning || 0})`,
								id: 3,
							},
						],
					},
					{
						label: "消息",
						id: '消息',
						children: [{
								label: `工单消息(${this.noticeInfo.workOrderWarning || 0})`,
								id: '1',
							},
							{
								label: `设备消息(${this.noticeInfo.deviceWarning || 0})`,
								id: '2',
							},
							{
								label: `模具消息(${this.noticeInfo.moldWarning || 0})`,
								id: '3',
							},
						],
					},
				];
			},
		},
		data() {
			return {
				src: '/dms/messageWarning/queryPadMessageList',
				noReadUrl: '/dms/messageWarning/queryEarlyTotalRead',
				markReadUrl: '/dms/messageWarning/updateMessageRead',
				type: 'all',
				params: {
					templateType: 1,
					messageStatus: '',
				},
				emailIcon,
				delId: '',
				columns: [{
						label: '状态',
						value: '',
						width: '25rem',
						slot: 'image',
					},
					{
						label: '内容',
						value: 'planContent',
						width: '70rem',
					}, {
						label: '时间',
						value: 'createTime',
						width: '35rem',
					}, {
						label: '操作',
						slot: 'action',
						width: '10rem',
					}

				],
				config: {
					type: "radio", //radio,checkbox
					idKey: "id",
					labelKey: "label",
					multiple: false,
				},
				isFirstLogin: !getDevice(),
				iconSrc,
				loading: false,
				selectedItem: {},

				warningInfo: {},
				noticeInfo: {},
				templateName: '预警',
				loading:false,
				loading1:false,
				rowDetail: {},
				noReadNum: 0, //未读数量
			};
		},
		methods: {
			// back() {
			// 	this.goto("/pages/home/index");
			// },
			goto(url) {
				uni.navigateTo({
					url,
					animationType: "pop-in",
					animationDuration: 1000,
				});
			},
			changeNotice(type) {
				this.params.messageStatus = type;
				this.$refs['table'] && this.$refs['table'].reload();
			},
			click(item) {
				this.selectedItem = item;
				this.$refs.popup.open();
			},
			treeChange(val) {
				this.templateName = val.curItem.label;
				if (val.curItem.label.includes('预警')) {
					this.src = '/dms/messageWarning/queryPadMessageList'
					this.noReadUrl = '/dms/messageWarning/queryEarlyTotalRead';
					this.markReadUrl = '/dms/messageWarning/updateMessageRead';
				} else {
					this.src = '/dms/messageWarning/queryMessageInformationList'
					this.noReadUrl = '/dms/messageWarning/queryEarlyInformationTotalRead';
					this.markReadUrl = '/dms/messageWarning/updateMessageInformationRead';
				}
				this.params.templateType = val.curItem.id - 0
				this.$nextTick(() => {
					this.$refs['table'] && this.$refs['table'].reload();
				})
				this.getTotalRead();

				this.type = 'all';
			},
			tabClick(index) {
				this.activeIndex = index;
				this.workShop = this.list1[index].workShop;
			},
			confirm() {
				fetch('post', '/dms/messageWarning/deleteMessageById', null, [this.delId]).then(res => {
					this.$toast("操作成功");
					this.$refs['table'] && this.$refs['table'].reload();
				})
			},
			getEarlyWarningTotal() {
				this.loading=true;
				fetch('get', '/dms/messageWarning/queryEarlyWarningTotal').then(res => {
					this.$set(this, 'warningInfo', res || {})
					this.loading=false;
				})
			},
			getEarlyNoticeTotal() {
				this.loading1=true;
				fetch('get', '/dms/messageWarning/queryEarlyWarningInformationTotal').then(res => {
					this.$set(this, 'noticeInfo', res || {})
					this.loading1=false;
				})
			},
			getTotalRead() {
				fetch('get', this.noReadUrl, {
					templateType: this.params.templateType,
				}).then((res) => {
					this.noReadNum = res;
				});
			},
			deleteRow(row) {
				this.delId = row.id;
				this.$refs.popup.open()
			},
			checkDetail(row) {
				this.rowDetail = {
					...row
				};
				if (row.messageStatus == 0) {
					this.makeRead(row.id);
				}
				this.type = 'detail';
			},
			goBack() {
				this.type = 'all';
			},
			makeRead(type) {
				let data = [];
				if (type == 'all') {
					data = this.$refs['table'].tableData.map((item) => item.id);
				} else {
					data.push(type);
				}
				fetch('post', this.markReadUrl, null, data).then((res) => {
					this.refush();
				});
			},
			refush() {
				this.getEarlyWarningTotal();
				this.getEarlyNoticeTotal();
				this.getTotalRead();
				this.$refs['table'] && this.$refs['table'].reload();
			},
		},
		mounted() {
			this.getEarlyWarningTotal(); //预警总数列
			this.getEarlyNoticeTotal();
			this.$refs['table'] && this.$refs['table'].reload();
		},
		onShow() {
			this.$refs['table'] && this.$refs['table'].reload();
		},

	};
</script>

<style scoped lang="scss">
	.operationBtn {
		color: #2979ff;
	}

	.notice {
		display: flex;
		justify-content: center !important;
		align-items: center;
		position: relative;
		width: 100%;
		image {
			width: 3rem;
			height: 3rem;
			padding: 1.5rem;
			box-sizing: content-box;
			border-radius: 2px;
			background-color: #e6e6e6;
			// background-color: red !important;
		}

		.total {
			position: absolute;
			background-color: red;
			color: white;
			border-radius: 50%;
			// display: flex;
			line-height: 2.5rem;
			font-size: 1.5rem;
			text-align: center;
			align-items: center;
			justify-content: center;
			top: 18%;
			right: 41%;
			width: 1rem;
			height: 1rem;
		}
	}

	.container {
		display: flex;
		flex-direction: row;
		width: 100%;

		.loading {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, 0.8);
			z-index: 1;
		}

		.right {
			flex: 1;
		}

		.tab_box {
			display: flex;
			flex-direction: column;
			border-right: 1px solid #ccc;
			padding-right: 2rem;
			margin-right: 2rem;
			width: 33rem;
			height: 100%;
			overflow-y: auto;

			.tab_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1rem;
				height: 8rem;
				width: 100%;
			}

			.active {
				background-color: #ecf1f5;
				color: #0076cc;
				height: 8rem;
				width: 100%;
			}
		}

		.content_box {
			display: flex;
			flex: 1;
			flex-direction: column;
			// height: 68vh !important;

			.content {
				flex: 1;
				display: none;
				margin-top: 3rem;
				animation: moving 0.5s ease;
				overflow-y: scroll;
				display: grid;
				// grid: auto-flow / 1fr 1fr 1fr 1fr;
			}

			// .active {
			// 	display: block;
			// }
			.panel {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.radio-btns {
					display: flex;
					flex-direction: row;

					view {
						min-width: 13rem;
						text-align: center;
						line-height: 6rem;
						font-size: 2rem;
						height: 6rem;
						border: 1px solid #ccc;
						border-left: none;
					}

					view:first-child {
						border-left: 1px solid #ccc;
						border-radius: 5px 0 0 5px;
					}

					view:last-child {
						border-radius: 0 5px 5px 0;
					}

					.active {
						background-color: #ecf1f5;
						border-color: #0076cc !important;
					}
				}

				.back {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666;
				}
			}

		}

		.pagination {
			display: flex;
			justify-content: flex-end;
			margin-top: 4rem;
		}

		/deep/ .page-pagination {
			width: auto;

			.page-scroll-child {
				height: auto !important;
			}

			.pag-btn {
				font-size: 2rem !important;
				border: none !important;
				color: #999 !important;
				margin: 0 1rem !important;
				width: 2rem !important;
				height: 2rem !important;
				display: flex !important;
				justify-content: center !important;
				align-items: center !important;
				padding: 2rem !important;
			}

			.pag-btn.active {
				background-color: #70b1e2 !important;
				border-radius: 1rem;
			}

			.pag-btn.start,
			.pag-btn.prev,
			.pag-btn.next,
			,
			.pag-btn.end {
				border: 1px solid #ccc !important;
				border-radius: 1rem;
			}
		}
	}
</style>